<template>
    <div class="warp">
        <div class="topBar">
            <div class="close" @click="$router.go(-1)"><i class="el-icon-close"></i></div>
        </div>
        <div class="minTile">
            <span class="line"></span><p>初审问题汇总（电脑）</p>
            <img v-if="firstApproveStatus == 0" src="../../assets/reviews/NotPass.png"/>
            <img v-else-if="firstApproveStatus == 1" src="../../assets/reviews/pass.png"/>
            <img v-else src="../../assets/reviews/passing.png"/>
        </div>
        <!--<div class="conditions">-->
            <!--<div class="cTitle">评定教授职称应具备下列业绩条件</div>-->
            <!--<div class="cList">-->
                <!--<div>系统讲授两门以上课程（含MOOC课程）：</div>-->
                <!--<p>-->
                    <!--<el-radio v-model="radio" label="1">是</el-radio>-->
                    <!--<el-radio v-model="radio" label="2">否</el-radio>-->
                <!--</p>-->
            <!--</div>-->
        <!--</div>-->
        <div class="conditions" style="border: none">
            <!--<div class="cTitle">具备下列条件之一</div>-->
            <div class="cList" v-for="(item,i) in qaApplyRecordAttributes" :key="item.id">
                <div>{{i+1}}、{{item.caluseContent}}</div>
                <p v-if="item.past == 0">
                    <el-radio  value="0">是</el-radio>
                    <el-radio>否</el-radio>
                </p>
                <p v-else-if="item.past == 1">
                    <el-radio>是</el-radio>
                    <el-radio value="0">否</el-radio>
                </p>
            </div>
        </div>
        <div class="minTile minTile2">
            <span class="line"></span><p>人工审核问题建议</p>
            <img v-if="secondApproveStatus == 0" src="../../assets/reviews/NotPass.png"/>
            <img v-else-if="secondApproveStatus == 1" src="../../assets/reviews/pass.png"/>
        </div>
        <div class="desc">
            <el-input
                    type="textarea"
                    :disabled="hasDisabled"
                    resize="none"
                    rows="6"
                    v-model="opinion">
            </el-input>
        </div>
        <div class="foot" v-if="secondApproveStatus == 2">
            <el-button type="primary" size="mini" @click="handleFindApprove(0)" round>不通过</el-button>
            <el-button type="primary" size="mini" @click="handleFindApprove(1)" round>通过</el-button>
        </div>
    </div>
</template>

<script>
    import { findAuditDetails,findApprove } from '@/service/api'
    import Qs from 'qs'
    export default {
        name: "reviewsInfo",
        data () {
            return {
                radio: '1',
                firstApproveStatus: null,
                secondApproveStatus: null,
                qaApplyRecordAttributes:[],
                opinion:'',
                id:'',
                hasDisabled: true
            }
        },
        created() {
            console.log(this.$route.params)
            this.id = this.$route.params.id;
            this.handleFindAuditDetails(this.$route.params.id)
        },
        methods: {
            handleFindAuditDetails(id) { //查询详情
                let params = {id: id}
                findAuditDetails(Qs.stringify(params)).then(res => {
                    if(res.code == 200){
                        console.log(res.data)
                        this.firstApproveStatus = res.data.firstApproveStatus;
                        this.secondApproveStatus = res.data.secondApproveStatus;
                        this.qaApplyRecordAttributes = res.data.qaApplyRecordAttributes;
                        this.opinion = res.data.approveOpinion;
                        if(res.data.secondApproveStatus == 2){
                            this.hasDisabled = false;
                        }
                    }else {
                        console.log(res)
                    }
                });
            },
            handleFindApprove(type) { //人工审核
                let params = {applyId: this.id,opinion:this.opinion,type:type}
                findApprove(Qs.stringify(params)).then(res => {
                    if(res.code == 200){
                        console.log(res.data)
                    }else {
                        console.log(res)
                    }
                });
            }
        }
    }
</script>

<style scoped>

    .warp {
        width: 100%;
        min-height: 100%;
        height: auto;
        background: #fff;
        box-shadow:0px 9px 10px 2px rgba(43,103,254,0.05);
        border-radius:5px;
        display:inline-block
    }
    .topBar{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
    }
    .topBar>.close{
        padding: 10px;
        font-size: 20px;
        margin-right: 8px;
    }
    .minTile {
        display: flex;
        align-items: center;
        background: #f5f8fe;
        margin: 26px 25px 16px;
        color: #417FFE;
        font-size: 12px;
        padding: 13px 18px;
        position: relative;
    }
    .minTile p{
        font-weight: bold;
    }
    .minTile .line {
        display: block;
        width: 3px;
        height: 12px;
        background: #417FFE;
        margin-right: 9px;
    }
    .minTile > img{
        position: absolute;
        left: 166px;
        top: -8px;
        display: block;
        width: 60px;
    }

    .conditions{
        margin: 20px 50px 0px;
        padding-bottom: 20px;
        border-bottom: 3px solid #F6F8FA;
    }
    .cTitle{
        color: #333;
        font-size: 16px;
    }
    .cList{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
    }
    .cList > div{
        color: #333;
        font-size: 13px;
        width: 84%;
    }
    .minTile2{
        margin: 0px 25px 16px;
    }
    .desc{
        height: 160px;
        margin: 0 52px;
    }
    .foot{
        text-align: center;
        padding-bottom: 20px;
    }
    .foot >>> .el-button{
        width: 90px;
        margin: 0 20px;
        box-shadow:0px 9px 18px 2px rgba(43,103,254,0.2);
    }
</style>
